<template>
  <!-- <AvicModal
    :visible="flowNodeSelectVisible"
    :modal-title="getFlowNodeSelectTitle"
    :set-modal-style="modalWidthAndHeight.modalStyle"
    :set-modal-body-style="modalWidthAndHeight.bodyStyle"
    :modal-width="modalWidthAndHeight.standardModalStyle.width"
    :modal-height="modalWidthAndHeight.standardModalStyle.height"
    :modal-cut-height="48"
    :adjust-size="true"
    wrap-class-name="table-modal-wrap"
    :centered="true"
    :destroy-on-close="true"
    :mask-close-able="false"
    :footer="null"
    @cancel="closeModal"
  > -->
  <AvicModal
    :visible="flowNodeSelectVisible"
    :title="getFlowNodeSelectTitle"
    width="100%"
    height="100%"
    :centered="true"
    :body-style="{ padding: '8px', display: 'flex', flexDirection: 'column' }"
    :full-screen="true"
    :adjust-size="false"
    @cancel="closeModal"
  >
    <template #footer>
      <a-button title="返回" type="primary" ghost @click="closeModal">返回</a-button>
    </template>
    <a-alert
      v-if="getFlowNodeSelectType === 'doglobaljump'"
      message="在有多个并发节点的情况下，请您先选择一个流程跳转的起始节点（点击红框标记的节点），然后再选择一个目标节点后执行流程跳转操作"
      type="info"
      show-icon
    />
    <!-- <a-tag color="blue">

    </a-tag> -->
    <a-alert
      v-if="getFlowNodeSelectType === 'dowithdrawpart'"
      message="在有多个并发节点的情况下，请您先选择一个流程拿回部分待办的节点（点击红框标记的节点），然后执行流程拿回部分待办操作"
      type="info"
      show-icon
    />

    <!-- <a-tag color="blue" v-if="getFlowNodeSelectType === 'dowithdrawpart'">

    </a-tag> -->
    <div id="bpm-chart" style="flex: 1 0 0; height: 1px">
      <avic-bpm-chart
        v-if="flowNodeSelectVisible"
        ref="bpmChartRef"
        :type="getFlowNodeSelectType"
        :bpm-instance-object="bpmInstanceObject"
        @clickNode="clickNode"
      />
    </div>
    <div
      v-if="bpmInstanceObject.bpmNodeSelect?.type === 'dostepuserdefined'"
      :key="JSON.stringify(userDefinedList)"
      class="user-defined-table"
    >
      <AvicTable
        :bordered="false"
        :columns="columns"
        :row-key="(record) => record.nodeName"
        :data-source="userDefinedList"
        :row-selection="{
          type: 'radio',
          columnWidth: 0
        }"
        :loading="loading"
        :pagination="false"
        :show-table-setting="false"
        @refresh="loadUserList"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'id'">
            {{ index + 1 }}
          </template>
        </template>
      </AvicTable>
    </div>
  </AvicModal>
</template>
<script>
import AvicBpmChart from '../bpm-content/AvicBpmChart/index.vue';
import { message } from 'ant-design-vue';
import { httpAction } from '@/api/avic/bpm/FlowUtilApi';
import bpmUtils from '@/views/avic/bpm/bpmutils/FlowUtils';

// import { modalWidthAndHeight } from 'avic-common';
export default {
  name: 'BpmNodeSelect',
  components: {
    AvicBpmChart
  },
  props: {
    bpmInstanceObject: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      flowNodeSelectVisible: false, // 弹窗modal显隐
      loading: false,
      getUserDefinedParam: {
        url: `${bpmUtils.baseurl}/business/getUserDefinedList/v1`,
        method: 'get'
      },
      userDefinedList: [],
      columns: [
        {
          title: '序号',
          ellipsis: true,
          dataIndex: 'id',
          width: 60,
          align: 'center'
        },
        {
          title: '节点名称',
          ellipsis: true,
          dataIndex: 'nodeName',
          minWidth: 200,
          width: 200,
          resizable: true,
          align: 'left'
        },
        {
          title: '已配置人员',
          ellipsis: true,
          dataIndex: 'userName',
          minWidth: 180,
          resizable: true,
          align: 'left'
        }
      ]
      // modalWidthAndHeight: modalWidthAndHeight(1280, 540, 48) // 弹窗modal宽高控制
    };
  },
  computed: {
    getFlowNodeSelectTitle() {
      return this.bpmInstanceObject.bpmNodeSelect.title;
    },
    getFlowNodeSelectType() {
      return this.bpmInstanceObject.bpmNodeSelect.type;
    }
    // chartHeight() {
    //   // 拿回部分
    //   if (this.bpmInstanceObject.bpmNodeSelect.type === 'dowithdrawpart') {
    //     return 'flex: 1 0 0 ;height:1px';
    //   }
    //   if (this.bpmInstanceObject.bpmNodeSelect.type === 'dostepuserdefined') {
    //     return 'flex: 1 0 0 ;height:1px';
    //   }
    //   return 'height: 100%'; // 任意退回
    // }
  },
  watch: {
    /**
     * 监听是否显示
     */
    'bpmInstanceObject.bpmNodeSelect.flowNodeSelectVisible': {
      handler(flowNodeSelectVisible) {
        this.flowNodeSelectVisible = flowNodeSelectVisible;
        if (flowNodeSelectVisible === true) {
          this.loadUserList();
        }
      }
    }
  },
  mounted() {
    window.bpmNodeSelectFlowChartRefresh = () => {
      this.$nextTick(() => {
        this.$refs.bpmChartRef.refreshFlowChart();
        setTimeout(() => {
          this.loadUserList();
        }, 300);
      });
    };
  },
  beforeUnmount() {
    window.bpmNodeSelectFlowChartRefresh = null;
  },
  methods: {
    /**
     * 点击返回、点击X关闭事件
     */
    closeModal() {
      this.bpmInstanceObject.bpmNodeSelect.closeFlowNodeSelectModal(this.bpmInstanceObject);
    },
    clickNode(params) {
      if (this.getFlowNodeSelectType === 'doglobaljump') {
        // 流程跳转
        this.bpmInstanceObject.bpmGlobaljump.BpmGlobaljumpCallback(this.bpmInstanceObject, params);
      } else if (this.getFlowNodeSelectType === 'doretreattowant') {
        // 任意退回
        this.bpmInstanceObject.bpmRetreat.executeTowantCallback(this.bpmInstanceObject, params);
      } else if (this.getFlowNodeSelectType === 'dosupplement') {
        // 补发
        this.bpmInstanceObject.bpmSupplement.BpmSupplementCallback(this.bpmInstanceObject, params);
      } else if (this.getFlowNodeSelectType === 'dowithdraw') {
        // 拿回
        this.bpmInstanceObject.bpmWithdraw.BpmWithdrawCallback(this.bpmInstanceObject, params);
      } else if (this.getFlowNodeSelectType === 'dostepuserdefined') {
        if (params.isCurrent === 'true' || params.over === 'true') {
          message.warning('不可设置当前节点和已流转过节点');
        } else {
          // 自定义选人
          this.bpmInstanceObject.bpmStepuserdefined.BpmStepuserdefinedCallback(this.bpmInstanceObject, params);
        }
      } else if (this.getFlowNodeSelectType === 'dowithdrawpart') {
        // 拿回部分待办
        this.bpmInstanceObject.bpmWithdrawPart.BpmWithdrawPartCallback(this.bpmInstanceObject, params);
      }
    },
    async loadUserList() {
      this.loading = true;
      this.userDefinedList = [];
      const result = await httpAction(
        `${this.getUserDefinedParam.url}/${this.bpmInstanceObject.bpmModel.entryId}`,
        null,
        this.getUserDefinedParam.method
      );
      this.loading = false;
      if (result && result.data) {
        const userDefinedListRes = result.data;
        userDefinedListRes.map((item) => {
          const userObj = JSON.parse(item.selectUserId);
          const names = [];
          userObj.forEach((user) => {
            names.push(user.userName);
          });
          item.userName = names.join('；');
          item.nodeName = `${item.stepId}（${item.stepName}）`;
          return item;
        });
        this.userDefinedList = userDefinedListRes;
      }
    }
  }
};
</script>
<style scoped lang="less">
#bpm-chart {
  // height: 100% !important;
  :deep(.graph-container) {
    height: 100%;
    .layout {
      // height: 100%;
      .graph-main-container {
        // position: initial;
      }
    }
  }
}
.user-defined-table {
  flex: 0 0 300px;
  margin-top: 8px;
  :deep(.advanced-table, .ant-spin-nested-loading) {
    height: 100%;
  }
  :deep(.ant-spin-nested-loading .ant-spin-container) {
    height: 100%;
  }
  :deep(.surely-table-empty-container) {
    display: block;
  }
}
</style>
